import React, { useState, useContext } from "react";
import QuestionnaireContext from "../../context/questionnaire/QuestionnaireContext";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TextInput,
  TouchableOpacity,
  Modal,
  Alert,
  TouchableWithoutFeedback,
} from "react-native";
import ShowChoiceQues from "../../components/showSubject/showChoiceQues";
import ShowEssayQues from "../../components/showSubject/ShowEssayQues";
import ShowCompletion from "../../components/showSubject/ShowCompletion";
import ShowComplexQues from "../../components/showSubject/ShowComplexQues";

import { AntDesign } from "@expo/vector-icons";

const QuesGroup = ({ navigation, route }) => {
  const { groupIndex, groupData, isAdd } = route.params;

  const { QuesData, addQues, editGroupQues } = useContext(QuestionnaireContext);

  // 题型Modal
  const [isVisible, setIsVisible] = useState(false);
  // 题目组标题
  const [groupTitle, setGroupTitle] = useState(groupData.head);
  // 题目组题目
  const [quesArr, setQuesArr] = useState(groupData.contents);
  // 题目组
  const [quesBody, setQuesBody] = useState(QuesData.body);

  React.useLayoutEffect(() => {
    if (!isAdd) {
      navigation.setOptions({
        title: "修改题目组",
        headerRight: () => (
          <TouchableOpacity
            onPress={() => {
              onConfirmeDeleted(groupIndex);
            }}
          >
            <AntDesign
              name="delete"
              size={20}
              color="#fff"
              style={{ marginRight: 5 }}
            />
          </TouchableOpacity>
        ),
      });
    }
  }, [navigation]);

  // 删除题目组
  const onConfirmeDeleted = (groupIndex) => {
    // setDeletedId(id);
    Alert.alert(
      "提示",
      "确定删除题目组:" +
        String.fromCharCode(groupIndex + 65) +
        " " +
        groupTitle +
        "吗?",
      [
        {
          text: "确定",
          onPress: () => {
            let t_body = quesBody;
            t_body.splice(groupIndex, 1);
            editGroupQues(t_body);
            navigation.goBack();
          },
        },
        {
          text: "取消",
        },
      ]
    );
  };

  // 添加题目
  const onSubmit = (index, question) => {
    setQuesArr((preQuesArr) => {
      return [...preQuesArr, question];
    });
  };

  // 编辑题目
  const editQues = (quesIndex, question) => {
    setQuesArr((preQuesArr) => {
      return preQuesArr.map((item, index) => {
        return index == quesIndex ? question : item;
      });
    });
  };

  // 删除题目
  const deleteQues = (index) => {
    setQuesArr((preQuesArr) => {
      return preQuesArr.filter((item, quesIndex) => index !== quesIndex);
    });
  };

  // 编辑题目组
  const editGroup = async (question) => {
    let t_body = quesBody;
    t_body[groupIndex] = question;
    // console.log(t_body[groupIndex].contents[0].visible);
    editGroupQues(t_body);
  };

  return (
    <View style={styles.container}>
      <View style={{ flex: 10 }}>
        <View>
          <TextInput
            style={styles.inputBox}
            // multiline={true}
            maxLength={500}
            value={groupTitle}
            placeholder="请输入题目组标题"
            onChangeText={(text) => {
              setGroupTitle(text);
            }}
          ></TextInput>
        </View>
        <ScrollView>
          <View>
            {quesArr.map((question, index) => {
              // console.log("题目组呢", quesArr);
              if (question.type == 1) {
                return (
                  <View key={index}>
                    <View
                      style={{ height: 5, backgroundColor: "#f8f8f8" }}
                    ></View>
                    <TouchableOpacity
                      onPress={() => {
                        navigation.navigate("添加题目", {
                          onSubmit: editQues,
                          onDelete: deleteQues,
                          isAdd: false,
                          type: 1,
                          quesIndex: index,
                          showQues: question,
                        });
                      }}
                    >
                      <ShowEssayQues
                        isEdit={false}
                        number={index + 1}
                        QuesContent={question}
                      ></ShowEssayQues>
                    </TouchableOpacity>
                  </View>
                );
              }
              if (question.type == 2 || question.type == 3) {
                return (
                  <View key={index}>
                    <View
                      style={{ height: 5, backgroundColor: "#f8f8f8" }}
                    ></View>
                    <TouchableOpacity
                      onPress={() => {
                        navigation.navigate("添加题目", {
                          onSubmit: editQues,
                          onDelete: deleteQues,
                          isAdd: false,
                          type: question.type,
                          quesIndex: index,
                          showQues: question,
                        });
                      }}
                    >
                      <ShowChoiceQues
                        isEdit={false}
                        number={index + 1}
                        QuesContent={question}
                      ></ShowChoiceQues>
                    </TouchableOpacity>
                  </View>
                );
              }
              if (question.type == 4) {
                return (
                  <View key={index}>
                    <View
                      style={{ height: 5, backgroundColor: "#f8f8f8" }}
                    ></View>
                    <TouchableOpacity
                      onPress={() => {
                        navigation.navigate("添加题目", {
                          onSubmit: editQues,
                          onDelete: deleteQues,
                          isAdd: false,
                          type: 4,
                          quesIndex: index,
                          showQues: question,
                        });
                      }}
                    >
                      <ShowCompletion
                        isEdit={false}
                        number={index + 1}
                        QuesContent={question}
                      ></ShowCompletion>
                    </TouchableOpacity>
                  </View>
                );
              }
              if (question.type == 5) {
                return (
                  <View key={index}>
                    <View
                      style={{ height: 5, backgroundColor: "#f8f8f8" }}
                    ></View>
                    <TouchableOpacity
                      onPress={() => {
                        navigation.navigate("复合题型", {
                          onSubmit: editQues,
                          onDelete: deleteQues,
                          isAdd: false,
                          type: 5,
                          quesIndex: index,
                          showQues: question,
                        });
                      }}
                    >
                      <ShowComplexQues
                        isEdit={false}
                        number={index + 1}
                        QuesContent={question}
                      ></ShowComplexQues>
                    </TouchableOpacity>
                  </View>
                );
              }
            })}
            {/* <View style={{ borderBottomWidth: 5, borderColor: "#eee" }}></View> */}
          </View>
        </ScrollView>
      </View>
      <View style={{ flex: 1 }}>
        <View style={styles.btnBox}>
          <TouchableOpacity
            style={styles.backBtn}
            onPress={() => setIsVisible(true)}
          >
            <Text style={{ color: "#41C3EE" }}>添加题目</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.submitBtn}
            onPress={() => {
              if (groupIndex == -1) {
                addQues({
                  type: 0,
                  head: groupTitle,
                  contents: quesArr,
                  visible: true,
                });
              } else {
                let t_ques = {
                  visible: true,
                  type: groupData.type,
                  head: groupTitle,
                  contents: quesArr,
                };
                editGroup(t_ques);
              }

              navigation.goBack();
            }}
          >
            <Text style={{ color: "#fff" }}>确认</Text>
          </TouchableOpacity>
        </View>
      </View>
      <Modal animationType="fade" transparent={true} visible={isVisible}>
        <View style={styles.ModalBackground}></View>
        <TouchableWithoutFeedback
          onPress={() => {
            setIsVisible(false);
          }}
        >
          <View style={styles.ModalTop}></View>
        </TouchableWithoutFeedback>
        <View style={styles.ModalStyle}>
          <TouchableOpacity
            style={styles.modalOption}
            onPress={() => {
              // console.log("问答题");
              setIsVisible(false);
              navigation.navigate("添加题目", {
                onSubmit: onSubmit,
                type: 1,
                quesIndex: -1,
                isAdd: true,
              });
            }}
          >
            <Text style={styles.modalText}>问答题</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.modalOption}
            onPress={() => {
              // console.log("单选题");
              setIsVisible(false);
              navigation.navigate("添加题目", {
                onSubmit: onSubmit,
                type: 2,
                quesIndex: -1,
                isAdd: true,
              });
            }}
          >
            <Text style={styles.modalText}>单选题</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.modalOption}
            onPress={() => {
              // console.log("多选题");
              setIsVisible(false);
              navigation.navigate("添加题目", {
                onSubmit: onSubmit,
                type: 3,
                quesIndex: -1,
                isAdd: true,
              });
            }}
          >
            <Text style={styles.modalText}>多选题</Text>
          </TouchableOpacity>
          {/* <TouchableOpacity
            style={styles.modalOption}
            onPress={() => {
              setIsVisible(false);
              navigation.navigate("添加题目", {
                onSubmit: onSubmit,
                type: 4,
                quesIndex: -1,
                isAdd:true,
              });
            }}
          >
            <Text style={styles.modalText}>填空题</Text>
          </TouchableOpacity> */}
          <TouchableOpacity
            style={[styles.modalOption, { borderBottomWidth: 4 }]}
            onPress={() => {
              // console.log("复合题型");
              setIsVisible(false);
              navigation.navigate("复合题型", {
                onSubmit: onSubmit,
                type: 5,
                quesIndex: -1,
                isAdd: true,
              });
            }}
          >
            <Text style={styles.modalText}>复合题型</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.modalOption}
            onPress={() => {
              setIsVisible(false);
            }}
          >
            <Text style={styles.modalText}>取消</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    // marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "white",
  },
  ModalBackground: {
    backgroundColor: "#727272",
    opacity: 0.3,
    zIndex: 0,
    position: "absolute",
    width: "100%",
    height: "100%",
  },
  ModalStyle: {
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    backgroundColor: "#ffffff",
    zIndex: 1,
    position: "relative",
  },
  ModalTop: {
    flex: 1,
  },
  modalOption: {
    // backgroundColor: "yellow",
    width: "100%",
    padding: 15,
    borderBottomWidth: 0.5,
    borderBottomColor: "#e6e6e6",
  },
  modalText: {
    alignSelf: "center",
    fontSize: 16,
    color: "#201D1D",
  },
  inputBox: {
    marginTop: 5,
    marginBottom: 10,
    marginLeft: 40,
    marginRight: 40,
    borderColor: "#ddd",
    borderBottomWidth: 1,
    // height: 100,
    borderRadius: 3,
    padding: 10,
    paddingTop: 15,
    paddingBottom: 10,
  },
  backBtn: {
    flex: 5,
    borderWidth: 1,
    borderColor: "#41C3EE",
    // alignContent: "center",
    // justifyContent: "center",
    alignItems: "center",
    padding: 10,
    borderRadius: 5,
  },
  submitBtn: {
    flex: 3.5,
    marginLeft: "6%",
    backgroundColor: "#41C3EE",
    alignItems: "center",
    padding: 10,
    borderRadius: 5,
  },
  btnBox: {
    flexDirection: "row",
    marginLeft: "5%",
    marginRight: "5%",
    marginTop: 10,
  },
});

export default QuesGroup;
